<template>
    <div class="invoiceDetail-wrapper">
        <IHeader class="header" back="true" title="发票信息"></IHeader>
        <scroller class="content" v-if="invoiceData">
            <div class="info-cell flex_row align_center item-height border-bottom-ebebeb">
                <Label content="发票类型" notnecessary="true"></Label>
                <text class="col_464646 fs_28">{{invoiceType[invoiceData.invoiceType - 1]}}</text>
            </div>
            <div class="info-cell flex_row align_center item-height border-bottom-ebebeb">
                <Label content="抬头类型" notnecessary="true"></Label>
                <text class="col_464646 fs_28">{{invoiceType[invoiceData.riseType - 1]}}</text>
            </div>
            <div class="info-cell flex_row align_center item-height border-bottom-ebebeb">
                <Label content="发票抬头" notnecessary="true"></Label>
                <text class="col_464646 fs_28">{{invoiceData.invoiceRise}}</text>
            </div>
            <div class="info-cell flex_row align_center item-height border-bottom-ebebeb" v-if="invoiceData.invoiceType === '2'">
                <Label content="所在地区" notnecessary="true"></Label>
                <text class="col_464646 fs_28">{{invoiceData.provinceName}}{{invoiceData.cityName}}{{invoiceData.districtName}}</text>
            </div>
            <div class="info-cell flex_row  align_center item-height border-bottom-ebebeb" v-if="invoiceData.invoiceType === '2'">
                <Label content="详细地址" notnecessary="true"></Label>
                <text class="col_464646 fs_28 wordLimit">{{invoiceData.address}}</text>
            </div>
            <div class="info-cell flex_row align_center item-height border-bottom-ebebeb" v-if="invoiceData.riseType === '1'">
                <Label content="税号" notnecessary="true"></Label>
                <text class="col_464646 fs_28">{{invoiceData.ein}}</text>
            </div>
            <div class="info-cell flex_row align_center item-height border-bottom-ebebeb" v-if="invoiceData.invoiceType === '1'">
                <Label content="电子邮件" notnecessary="true"></Label>
                <text class="col_464646 fs_28">{{invoiceData.email}}</text>
            </div>
            <div class="info-cell flex_row align_center item-height border-bottom-ebebeb" v-if="invoiceData.riseType === '1'">
                <Label content="开户行和账号" notnecessary="true"></Label>
                <text class="col_464646 fs_28 wordLimit">{{invoiceData.bankAndAccount}}</text>
            </div>
            <div class="info-cell flex_row align_center item-height border-bottom-ebebeb">
                <Label content="备注" notnecessary="true"></Label>
                <text class="col_464646 fs_28 wordLimit">{{invoiceData.noteInformation}}</text>
            </div>
        </scroller>
    </div>
</template>

<script>
import IHeader from '@/components/header'
import Label from '@/components/label'
import { queryInvoice } from '@/api/user'
export default {
  name: 'invoiceDetail',
  data () {
    return {
      invoiceData: {}, // 发票信息
      invoiceType: ['电子', '纸质'], // 发票类型
      riseType: ['企业', '个人'] // 抬头类型
    }
  },
  mounted () {
    const that = this
    that.loadingShow = true
    that.$api.get(queryInvoice, {}, (res) => {
      that.loadingShow = false
      that.invoiceData = res.data
    }, () => {
      that.loadingShow = false
    }, true)
  },
  components: {
    IHeader,
    Label
  }
}
</script>

<style scoped>
    .fs_28 {
        font-size: 28px;
    }
    .align_center {
        align-items: center;
    }
    .item-height {
        height: 88px;
        line-height: 88px;
    }
    .flex_row {
        flex-direction: row;
    }
    .col_464646 {
        color: #464646;
    }
    .border-bottom-ebebeb {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #ebebeb;
    }
    .info-cell {
        padding-left: 24px;
        padding-right: 24px;
        justify-content: space-between;
    }
    .content {
        margin-top: 88px;
    }
    .wordLimit {
        width: 460px;
        line-height: 36px;
        text-align: right;
    }
</style>
